<template>
    <div>
        <Card>
             <Breadcrumb>
                <Breadcrumb-item>系统管理</Breadcrumb-item>
                <Breadcrumb-item>用户管理</Breadcrumb-item>
            </Breadcrumb>
        </Card>
       <Card  class="margin-top-5">
            <div class="margin-bottom-10">
                 <Button type="primary" icon="ios-plus-empty" @click="add">新增</Button>
                 <Input v-model="querys.search" placeholder="用户名" style="width: 300px"></Input>
                 <Button type="ghost" icon="ios-search" @click="searchData">搜索</Button>
                 <Button type="ghost" icon="ios-reload" @click="clearSearch">清空</Button>
            </div>
            <Table :loading="loading" border :columns="columns" :data="pageData.records"></Table>
            <Page :total="pageData.total" :page-size="pageData.size" @on-change="changePage" style="margin-top:10px;text-align:right;" show-total>
            </Page>
       </Card>
        <!--表单-->
        <Modal
            v-model="form.model"
            :width="800"
            :title="form.title"
            :loading="form.loading"
            :closable="false"
            :mask-closable="false"
            :scrollable="true"
            @on-ok="formSubmit">
             <Form ref="form" :model="form.fields" :rules="form.ruleValidate" :label-width="120">
                <FormItem label="用户名" prop="userName">
                    <Input v-model="form.fields.userName" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="form.fields.password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem label=确认密码 prop="userName">
                    <Input type="password" v-model="form.fields.password2" placeholder="请再次输入密码"></Input>
                </FormItem>
                <FormItem label="状态">
                     <i-switch v-model="form.fields.userState" size="large">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </FormItem>
                 <FormItem label="描述">
                    <Input v-model="form.fields.userDesc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入描述"></Input>
                </FormItem>
            </Form>
        </Modal>

    </div>
</template>

<script>
  export default {
    data () {
        return {
            columns: [
                { type: 'selection', width: 60,align: 'center' },
                { title: '头像',width:80, key: 'userImg',render:(h,params)=>{
                    return h('Avatar',{
                        props:{
                            src:params.row.userImg
                        }
                    })
                }},
                { title: '用户名', key: 'userName'},
                { title: '状态', key: 'userState',render:(h,params)=>{
                    if(params.row.userState === 1){
                        return h("Tag",{
                            props:{
                                color:"blue"
                            }
                        },"启用")
                    }else{
                        return h("Tag",{
                            props:{
                                color:"red"
                            }
                        },"禁用")
                    }
                }},
                { title: '描述', key: 'userDesc'},
                { title: '创建时间', key: 'createTime'},
                { title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small',icon:'ios-compose-outline' },
                                style: { marginRight: '5px'},
                                on: {
                                    click: () => {
                                       this.form.title="编辑"
                                       this.form.model = true
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: { type: 'error', size: 'small',icon:'ios-trash-outline'},
                                on: {
                                    click: () => {
                                        this.$api.delete('/user/delete',{id:params.row.id},res=>{this.fetchData()})
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            loading:false,
            querys:{
                search:''
            },
            pageData: {
                records:[], //记录
                size:10, //每页数据量
                current:1, //当前页
                pages:0, //总页数
                tital:0 //总记录数
            },
            form:{
                model:false,
                title:'新增',
                loading:true,
                fields:{
                    id:'',
                    userName:'',
                    password:'',
                    password2:'',
                    userState:true,
                    createTime:'',
                    userDesc:'',
                    userImg:'',
                    deptId:''
                },
                ruleValidate:{
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                }
            }
     }
},
    created(){
        this.fetchData()
    },
    methods: {
        //新增
        add(){
            this.form.model = true
            this.form.title = "新增"
        },
        //执行表单提交
        formSubmit(){
            this.$refs['form'].validate((valid) =>{
                if(valid){
                    setTimeout(() => {
                        this.form.model = false;
                    }, 2000);
                }else{
                  
                }
            })
        },
        //改变页面查询
        changePage(current){
            this.pageData.current = current
            this.fetchData()
        },
        //关键词搜索
        searchData(){
            this.pageData.current = 1
            this.fetchData()
        },
        //清空查询
        clearSearch(){
            this.querys.search = ''
            this.fetchData()
        },
        //获取数据列表
        fetchData() {
            this.loading = true
            this.querys.size = this.pageData.size
            this.querys.current = this.pageData.current
            this.$api.get('/user/list',this.querys,response => {
                this.pageData = response.data
                this.loading = false
            })
        },
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
            })
        },
        remove (index) {
            this.data6.splice(index, 1);
        }
    }
}
</script>
